<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <ui:composition template="/layout/masterPageNotHeaderSearch.xhtml">
        <ui:define name="ui-header">
            <title>#{utilsController.getLanguages("PackagesTitle")}</title>
        </ui:define>
         

        <ui:define name="ui-content">
            <link href="/resourcesApp/plugins/page_pricing.css" rel="stylesheet"/>
            <div class="container content">
                <div class="heading heading-v1 margin-bottom-50">
                    <h2 class="headerColor" style="font-size: 35px;">Pricing and Packages</h2>
                </div>

                <div class="row margin-bottom-10">
                    <div class="col-md-8">
                        <div class="panel panel-default rounded-custom-panel">
                            <h2 style="text-align: center">Package for Cars</h2>
                            <div class="panel-body" style="height: 270px">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="col-md-12 pricing-light">
                                            <div class="pricing hover-effect pricing-rounded">
                                                <div class="sticker-left">Best value</div>
                                                <div class="pricing-head">
                                                    <h3>Premium Package</h3>
                                                </div>
                                                <div style="padding: 10px 26px 0;">
                                                    <p style="font-size: 14px;color: #ffffff;font-weight: bold;padding-top: 0;">For $49 you get:</p>
                                                    <ul class="pricing-content" style="padding-left: 10px;">
                                                        <li>15 photos</li>
                                                        <li>150 days</li>
                                                        <li>Free Renewals</li>
                                                        <li>Ad View Report</li>
                                                    </ul>
                                                </div>
                                                <div class="pricing-footer">
                                                    <a class="btn-u rounded-custom-def" href="javascript:selectPackages(3,15,1)">
                                                        <i class="fa fa-shopping-cart"></i> Build Premium Package</a>
                                                </div>  
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 otherPackages">
                                        <h3> Plus Package</h3>
                                        <ul class="pricing-content" style="padding-left: 10px;">
                                            <li>$20</li>
                                            <li>15 photos</li>
                                            <li>150 days</li>
                                            <li>Free Renewals</li>
                                            <li>Ad View Report</li>
                                        </ul>
                                        <div style="margin-top: 28px;padding-right: 15px;">
                                            <button class="btn-u btn-block btn-u-default rounded-custom-def" 
                                                    type="button" onclick="selectPackages(2, 10,1);">Select</button>
                                        </div>
                                    </div>
                                    <div class="col-md-3 otherPackages">
                                        <h3> Free Package</h3>
                                        <ul class="pricing-content" style="padding-left: 10px;">
                                            <li>$0</li>
                                            <li>5  photos</li>
                                            <li>30 days</li>						
                                            <li>Free Renewals</li>
                                            <li>Ad View Report</li>
                                        </ul>
                                        <div style="margin-top: 28px;padding-right: 15px;">
                                            <button class="btn-u btn-block btn-u-default rounded-custom-def" 
                                                    type="button" onclick="selectPackages(1, 5,1);">Select</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="panel panel-default rounded-custom-panel">
                            <div class="panel-body" style="padding-left: 0px; padding-right: 0px;padding-bottom: 0px">
                                <h3 style="text-align: center" class="headerColor">Confidence Sells</h3>
                                <p style="margin-bottom: 0px;padding-left: 15px;">Feel confident posting your ad on Cars.com. 
                                    All ads go through extensive fraud filtering to provide a trustworthy community for buyers and sellers.</p>
                                <img src="/resourcesApp/img/caronroad.png" alt="" style="margin-top: 0px;width: 100%"/>
                            </div>
                        </div>

                    </div>
                </div>
                
                 <div class="row margin-bottom-10">
                    <div class="col-md-8">
                        <div class="panel panel-default rounded-custom-panel">
                            <h2 style="text-align: center">Package for Motobikes</h2>
                            <div class="panel-body" style="height: 270px">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="col-md-12 pricing-light">
                                            <div class="pricing hover-effect pricing-rounded">
                                                <div class="sticker-left">Best value</div>
                                                <div class="pricing-head">
                                                    <h3>Premium Package</h3>
                                                </div>
                                                <div style="padding: 10px 26px 0;">
                                                    <p style="font-size: 14px;color: #ffffff;font-weight: bold;padding-top: 0;">For $49 you get:</p>
                                                    <ul class="pricing-content" style="padding-left: 10px;">
                                                        <li>15 photos</li>
                                                        <li>150 days</li>
                                                        <li>Free Renewals</li>
                                                        <li>Ad View Report</li>
                                                    </ul>
                                                </div>
                                                <div class="pricing-footer">
                                                    <a class="btn-u rounded-custom-def" href="javascript:selectPackages(3,15,2)">
                                                        <i class="fa fa-shopping-cart"></i> Build Premium Package</a>
                                                </div>  
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 otherPackages">
                                        <h3> Plus Package</h3>
                                        <ul class="pricing-content" style="padding-left: 10px;">
                                            <li>$20</li>
                                            <li>15 photos</li>
                                            <li>150 days</li>
                                            <li>Free Renewals</li>
                                            <li>Ad View Report</li>
                                        </ul>
                                        <div style="margin-top: 28px;padding-right: 15px;">
                                            <button class="btn-u btn-block btn-u-default rounded-custom-def" 
                                                    type="button" onclick="selectPackages(2, 10,2);">Select</button>
                                        </div>
                                    </div>
                                    <div class="col-md-3 otherPackages">
                                        <h3> Free Package</h3>
                                        <ul class="pricing-content" style="padding-left: 10px;">
                                            <li>$0</li>
                                            <li>5  photos</li>
                                            <li>30 days</li>						
                                            <li>Free Renewals</li>
                                            <li>Ad View Report</li>
                                        </ul>
                                        <div style="margin-top: 28px;padding-right: 15px;">
                                            <button class="btn-u btn-block btn-u-default rounded-custom-def" 
                                                    type="button" onclick="selectPackages(1, 5,2);">Select</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="panel panel-default rounded-custom-panel">
                            <div class="panel-body" style="padding-left: 0px; padding-right: 0px;padding-bottom: 0px">
                                <h3 style="text-align: center" class="headerColor">Confidence Sells</h3>
                                <p style="margin-bottom: 0px;padding-left: 15px;">Feel confident posting your ad on Cars.com. 
                                    All ads go through extensive fraud filtering to provide a trustworthy community for buyers and sellers.</p>
                                <img src="/resourcesApp/img/caronroad.png" alt="" style="margin-top: 0px;width: 100%"/>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <h:form>
                <p:remoteCommand name="cmdSelectPackages" actionListener="#{c_DangTinController.cmd_SelectPackages}"/>
            </h:form>
        </ui:define>
    </ui:composition> 
</html>